<template>
	<view class="page">
		<div
			style="border-bottom: 5px solid #f3f4f5; background: #fff;position: fixed;top:0;z-index: 100;width: 100%; ">
			<div class="mySearch" style="padding-bottom: 10px;">
				<u-search placeholder="请输入" v-model="form.code" :showAction='false' @change='search'>
				</u-search>
			</div>
		</div>
		<div style="margin-top: 60px;">
			<div class="myUnit" v-for="(item, index) in list">
				<div @click='goNext(item.id)'>
					<div class="unitTitle">
						<div>
							{{index+1}}.{{item.orderNo}}
						</div>
						<u-icon name="arrow-right"></u-icon>
					</div>
					<div class="myText">
						<div>订单状态：</div>
						<div>{{item.orderStatusDesc}}</div>
					</div>
					<div class="myText">
						<div>关联单号：</div>
						<div>{{item.reOrderNo||'-'}}</div>
					</div>
					<div class="myText">
						<div>商品名称：</div>
						<div>{{item.productName}}</div>
					</div>
					<div class="myText">
						<div>订单数量：</div>
						<div>{{item.quantity}}</div>
					</div>
					<div class="myText">
						<div>创建时间：</div>
						<div>{{item.createTime||'-'}}</div>
					</div>
				</div>
				<div class='btns'>
					<div class="btnDiv" v-if="item.orderStatus==10">
						<u-button size='mini' type='primary' text="开始" @click="startWork(item.id)"
							throttleTime='1000'></u-button>
					</div>
				</div>
			</div>
			<u-loadmore class='myLoadmore' :status="status" line />
		</div>
	</view>
</template>

<script>
	import {
		listOrder,
		changeOrder,
		startOrder
	} from "@/api/orderMng/index.js"
	export default {
		data() {
			return {
				status: 'loading',
				flag: 0, //0待处理，1已出来
				list: [],
				scanForm: {
					flag: 0
				},
				form: {
					code: null,
					pageNum: 1,
					pageSize: 10,
					orderStatusList: [10, 20]
				}
			}
		},
		onReachBottom() {
			this.loadmore();
		},
		onLoad(e) {
			this.getList()
		},
		methods: {
			startWork(id) {
				let vm = this;
				uni.showModal({
					title: '提示',
					content: '是否确定开始？',
					success: function(res) {
						if (res.confirm) {
							startOrder({
								id: id
							}).then(res => {
								uni.showToast({
									title: '操作成功',
									success() {
										vm.search()
									}
								})
							})
						}
					}
				});
			},
			noOperate(id) {
				let vm = this;
				uni.scanCode({
					onlyFromCamera: true,
					success(e) {
						console.log(e)
						let result = e.result
						if (id != result) {
							uni.showToast({
								icon: "error",
								title: '订单号有误，请重试'
							})
							return
						}
						vm.scanForm.flag = 1
						vm.scanForm.id = id
						vm.modalShow = true;
					},
					fail(e) {
						console.log(e)
					},
				})
			},
			printOperate() {},
			search() {
				this.form.pageNum = 1
				this.getList()
			},
			loadmore() {
				this.form.pageNum++;
				this.getList();
			},
			goNext(id) {
				uni.navigateTo({
					url: '/pages/orderMng/orderDetail?id=' + id
				})
			},
			getList() {
				listOrder(this.form).then(res => {
					let total = res.total
					let list = res.rows
					if (this.form.pageNum == 1) {
						uni.pageScrollTo({
							scrollTop: 0
						})
						this.list = list;
					} else {
						this.list = this.list.concat(list);
					}
					if (this.form.pageNum * 10 >= total) {
						this.status = 'nomore'
					} else {
						this.status = 'loadmore'
					}
				}).catch(e => {
					this.status = 'nomore'
				})
			}
		}
	}
</script>
<style scoped lang="scss">
	.btns {
		display: flex;
		justify-content: space-around;
		margin-top: 10px;
	}

	.btn {
		padding: 0 10px;
		border: 1px solid;
		text-align: center;
		border-radius: 10px;
	}

	.primaryTag {
		background: $u-primary;
	}

	.btnDiv {
		width: 20%;
	}
</style>